<template>
  <div class="Resourcestransfer">
    <div class="selectDataClass">
      <el-form :inline="true" size="mini" :model="selectDate">
        <!-- <el-form-item label="资源类型 ：" class="form-item" label-width="100px">
              <el-radio v-model="selectDate.a" label="1">会员</el-radio>
              <el-radio v-model="selectDate.a" label="2">非会员</el-radio>
          </el-form-item>
          <el-form-item label="会员卡类型 ：" class="form-item">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="1">白银卡</el-checkbox>
                <el-checkbox label="2">黑金健康卡</el-checkbox>
                <el-checkbox label="3">黑金出行卡</el-checkbox>
              </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否在有效期 ：" v-if="selectDate.a == '1'" class="form-item">
            <el-radio v-model="selectDate.a" label="1">未过期</el-radio>
              <el-radio v-model="selectDate.a" label="2">已过期</el-radio>
          </el-form-item>
          <el-form-item label="注册时间 ：" class="form-item">
            <el-date-picker
              class="inputClass"
              v-model="selectDate.a"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker
            >--
            <el-date-picker
              class="inputClass"
              v-model="selectDate.a"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否有付费订单 ：" class="form-item">
              <el-radio v-model="selectDate.a" label="1">是</el-radio>
              <el-radio v-model="selectDate.a" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="付费订单类型 ：" class="form-item">
            
          </el-form-item>
          <el-form-item label="预留款 ：" class="form-item">
            <el-radio v-model="selectDate.a" label="1">有</el-radio>
              <el-radio v-model="selectDate.a" label="2">无</el-radio>
          </el-form-item> -->
        <el-form-item label="注册时间 ：" class="form-item">
          <el-date-picker class="inputClass" v-model="selectDate.regTimeBegin" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>--
          <el-date-picker class="inputClass" v-model="selectDate.regTimeEnd" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效时间 ：" class="form-item">
          <el-date-picker class="inputClass" v-model="selectDate.validTimeBegin" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>--
          <el-date-picker class="inputClass" v-model="selectDate.validTimeEnd" type="date" placeholder="选择日期"
            :value-format="format">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否有预留款 ：" class="form-item">
          <el-radio v-model="selectDate.isDeposit" label="true">是</el-radio>
          <el-radio v-model="selectDate.isDeposit" label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="是否会员 ：" class="form-item">
          <el-radio v-model="selectDate.isMember" label="true">是</el-radio>
          <el-radio v-model="selectDate.isMember" label="false">否</el-radio>
        </el-form-item>
        <el-form-item class="form-item">
          <!-- <el-button type="primary" size="mini">清空</el-button> -->
          <el-button type="primary" size="mini" @click="getcustomerResourceList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="custernum">
      <h4>未分配vip经理会员总数：{{ this.allnum }}</h4>
      <el-button type="primary" size="mini" @click="resource()">分配资源</el-button>
    </div>
    <!-- 分配资源弹窗 -->
    <el-dialog title="分配资源" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" size="mini" :inline="true" :model="selectList">
        <el-form-item label="在职的vip经理：">
          <el-select clearable size="mini" v-model="selectList.EmployeeVip">
            <el-option v-for="item in VipList" :key="item.employeeId" :label="item.employeeName"
              :value="item.employeeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转移数量:" label-width="100px">
          <el-input :disabled='!selectList.EmployeeVip' size="mini" v-model="selectList.num"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getRandomNum(selectList.num, EmployeeVipList.length)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "resourceTransfer",
    data() {
      return {
        format: "yyyy-MM-dd",
        //  总跳水
        allnum: "",
        // 初始数据
        selectDate: {
          a: "",
          regTimeBegin: "", //注册时间开始
          regTimeEnd: "", //注册时间结束
          validTimeBegin: "", //有效时间开始
          validTimeEnd: "", //有效时间结束
          isDeposit: "",
          isMember: "",
        },
        // 查询回来的数据
        tableDate: [],
        checkList: [],
        EmployeeVipList: [],
        // 分配资源弹窗
        dialogVisible: false,
        // 分配数据
        selectList: {
          EmployeeVip: "",
          num: "",
        },
        getRandomList: [],
      };
    },

    methods: {
      // 分配资源按钮
      resource() {
        this.dialogVisible = true;
      },
      // 生成随机数
      getRandomNum(needNum, allNum) {
        let randomList = []; //生成的随机数组
        while (randomList.length < needNum) {
          let num = Math.floor(Math.random() * allNum);
          if (randomList.indexOf(num) == -1) {
            randomList.push(num)
          }
        }
        for (let i = 0; i < randomList.length; i++) {
          this.EmployeeVipList[randomList[i]].employeeId = this.selectList.EmployeeVip
          this.getRandomList.push(this.EmployeeVipList[randomList[i]])
        }
        console.log(this.getRandomList)
        this.getdistributeVipresouce(document.cookie.split('=')[1])
      },

      getdistributeVipresouce() {
        localStorage.setItem("isToken", true);
        console.log(this.getRandomList)
        this.$axios.getdistributeVipresouce(
          // token:token,
          // customerInfo:this.getRandomList 
          this.getRandomList
        ).then((res) => {
          // 

          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.dialogVisible = false
            this.getcustomerResourceList()
          }
        });
      },





      // 查询在职的VIP经理
      getselectEmployeeVip() {
        this.$axios.getselectEmployeeVip({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.VipList = res.data;
          }
        });
      },
      // 查询未分配vip经理的会员
      getcustomerResourceList() {
        this.$axios
          .getcustomerResourceList({
            regTimeBegin: this.selectDate.regTimeBegin,
            regTimeEnd: this.selectDate.regTimeEnd,
            validTimeBegin: this.selectDate.validTimeBegin,
            validTimeEnd: this.selectDate.validTimeEnd,
            isDeposit: this.selectDate.isDeposit,
            isMember: this.selectDate.isMember,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.EmployeeVipList = res.data;
              this.allnum = res.data.length;
            }
          });
      },
    },
    mounted() {
      this.getselectEmployeeVip();
      this.getcustomerResourceList();
    },
  };
</script>
<style scoped>
  .selectDataClass {
    margin: 20px;
  }

  .el-form-item {}

  .form-item {
    margin-right: 40px;
    font-weight: 500;
  }

  .inputClass {
    width: 150px;
  }

  .custernum {
    margin: 20px;
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
</style>